<template>
	<view class="mainitemcard-container" v-if="data">
		<view class="title">
			{{ data.name }}
		</view>
		<view class="desc">
			{{ data.dosage }}
		</view>
		<view class="info">
			<view class="row">
				<view class="txt">
					到期时间
				</view>
				<view class="val">
					{{ transmitShelflife(data.productionDate, data.shelfLife) }}
				</view>
			</view>
			<view class="row">
				<view class="txt">
					吃药时间
				</view>
				<view class="val" v-if="data.reminderTime">
					<view class="block">
						{{ formatOne(data.reminderTime.hour) }}
					</view>:
					<view class="block">
						{{ formatOne(data.reminderTime.minute) }}
					</view>
				</view>
			</view>
		</view>
		<view class="setting info">
			<view class="row">
				<view class="button" @click="editDialogFlag = true; form = { ...data }">编辑</view>
				<view class="button" @click="removeItem">删除</view>
			</view>
			<view class="row">
				<view class="txt">
					开启提醒
				</view>
				<view class="val">
					<view class="button" @click="handleAlarmChange">
						去开启
					</view>
				</view>
			</view>
		</view>
		<view class="dialog" v-if="editDialogFlag">
			<view class="title">
				编辑模式
			</view>

			<input class="title" v-model="form.name">

			<input class="desc" v-model="form.dosage">

			<view class="info">
				<!--
					<view class="row">
						<view class="txt">
							到期时间
						</view>
						<view class="val">
							{{ transmitShelflife(data.productionDate, data.shelfLife) }}
						</view>
					</view>
				-->
				<view class="row">
					<view class="txt">
						吃药时间
					</view>
					<view class="val">
						<input class="block" v-model="form.reminderTime.hour">
						:
						<input class="block" v-model="form.reminderTime.minute">
					</view>
				</view>
			</view>

			<view class="desc">
				点击要编辑的内容进行修改
			</view>

			<view class="title">
				<view class="button" @click="editSuccess">编辑完成</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import {
	defineProps,
	defineEmits,
	ref
} from 'vue';
import { transmitShelflife } from '../../utils/transmitShelflife';
import { formatOne } from '../../utils/formatDate';
const props = defineProps({
	data: {
		type: Object,
		default: () => ({})
	}
});
const emit = defineEmits(['changeAlarm', 'refresh']);

const editDialogFlag = ref(false);
const form = ref({});

const handleAlarmChange = () => {
	emit('changeAlarm', props.data);
};

const editSuccess = async () => {
	editDialogFlag.value = false;
	// console.log(form.value);
	const res = await uniCloud.callFunction({
		name: 'updateMedicine',
		data: form.value
	});
	uni.showToast({
		icon: 'success',
		title: res.result.msg
	});
	emit('refresh');
};

const removeItem = () => {
	uni.showModal({
		title: '提示',
		content: '确定要删除吗？',
		success: res => {
			if (res.confirm) {
				// 使用_id之间删除
				uniCloud.callFunction({
					name: 'removeMedicine',
					data: { _id: props.data._id },
					success: res => {
						uni.showToast({
							title: '删除成功',
							icon: 'success'
						});
						// 告诉父组件刷新
						emit('refresh');
					},
					fail: err => {
						console.log(err);
						uni.showToast({
							title: '删除失败',
							icon: 'error',
						});
					}
				});
			}
		}
	});

};
</script>

<style scoped lang="scss">
@import "../../uni.scss";

.mainitemcard-container {
	position: relative;
	width: 90%;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	gap: 30rpx;
	background-color: $card-color;
	padding: 20rpx;
	border-radius: 10rpx;
	box-sizing: border-box;
	color: $text-color;
	// box-shadow: 0 0 10rpx 2rpx $base-color2;
	margin: 20rpx auto;
	border-radius: 20rpx;
	// border: 4px solid $base-color2;

	.title {
		font-size: 40rpx;
		font-weight: bolder;
		text-align: center;
		color: $title-color;
	}

	.desc {
		font-size: 30rpx;
		font-weight: bold;
		text-align: center;
	}

	.info {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		gap: 20rpx;

		.row {
			display: flex;
			justify-content: space-between;
			height: 60rpx;
			line-height: 60rpx;

			.txt {
				text-align: center;
				font-size: 30rpx;
			}

			.val {
				display: flex;

				.block {
					width: 60rpx;
					height: 60rpx;
					border-radius: 10rpx;
					background-color: $base-color1;
					text-align: center;
					line-height: 60rpx;
					margin-left: 10rpx;
				}

				.switch {
					width: 100rpx;
					height: 60rpx;
					border: 1px solid #ccc;
					border-radius: 30rpx;
					position: relative;

					&::before {
						content: '';
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
						background-color: #ccc;
						position: absolute;
						left: 0;
					}

					&.active {
						border: 1px solid green;
					}

					&.active::before {
						content: '';
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
						background-color: green;
						position: absolute;
						left: auto;
						right: 0;
					}


				}
			}

			.button {
				width: 100rpx;
				height: 60rpx;
				border-radius: 10rpx;
				text-align: center;
				line-height: 60rpx;
				color: #fff;

				&:nth-child(1) {
					background-color: $btn-primary-color;
				}

				&:nth-child(2) {
					background-color: $btn-danger-color;
				}
			}
		}
	}
}

.dialog {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background: #fff;
	font-weight: bolder;

	.button {
		box-sizing: border-box;
		width: 30%;
		margin: 20rpx auto;
		border-radius: 20rpx;
		color: white;
		background-color: $btn-primary-color;
	}
}
</style>